<div>
    <div v-if="categoryId!=''&&subCategoryId!=''">
        <el-form ref="editForm1" :model="form" label-width="100px"
            label-position="left">
            <!-- -{{skuValue}}
            -{{subCategoryId}} -->
            <!-- {{specsTableData}} -->
            <!-- {{freightTemplateId}}--{{calculateType}} -->

            <el-form-item label="商品规格" prop="specsType" :rules="{ required: true, message: '商品类型 不能为空'}">
                <el-radio-group v-model="form.specsType">
                    <el-radio :label="1">统一规格</el-radio>
                    <el-radio :label="2">多规格</el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>

        <!-- 统一规格 -->
        <div v-if="form.specsType==1">
            <el-form ref="editForm2" :model="skuObj" label-width="100px"
                label-position="left">
                <el-row :gutter="80">
                    <el-col :span="24">
                        <el-form-item label="商品编码" prop="productCode" :rules="[{trigger: ['blur', 'change'] ,validator: validateNum}]">
                            <el-input v-model="skuObj.productCode"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="销售价" prop="salePrice"
                            :rules="[{trigger: ['blur', 'change'] , required:true,validator: $vFN.Tools.validateMoney}]">
                            <el-input style="width:100%;" v-model="skuObj.salePrice">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="成本价" prop="originalPrice"
                            :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validatePrice}]">
                            <el-input style="width:100%;" v-model="skuObj.originalPrice">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市场价" prop="costPrice"
                            :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validatePrice}]">
                            <el-input style="width:100%;" v-model="skuObj.costPrice">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="当前库存" prop="stock"
                            :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validateStock}]">
                            <el-input style="width:100%;" v-model="skuObj.stock" :disabled="editType=='update'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="editType=='update'">
                        <el-form-item label="增减库存" prop="changeStockNum"
                            :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validateCountStock}]">
                            <el-input style="width:100%;" v-model="skuObj.changeStockNum">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="editType=='update'">
                        <el-form-item label="实际库存">
                            <el-input style="width:100%;"
                                :value="$vFN.Utils.countNumber_add(skuObj.stock,skuObj.changeStockNum)"
                                :disabled="editType=='update'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="重量（Kg）" prop="weight"
                            :rules="[{trigger: ['blur', 'change'] ,required:calculateType==2,validator: weight_validator}]">
                            <el-input style="width:100%;" v-model="skuObj.weight">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="体积（m³）" prop="volume"
                            :rules="[{trigger: ['blur', 'change'] , required:calculateType==3, validator: volume_validator}]">
                            <el-input style="width:100%;" v-model="skuObj.volume">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 多规格 -->
        <div v-if="form.specsType==2" class="specsType2">





            <div class="box">
                <div class="ul" v-for="(item,index) in skuValue">
                    <div class="hh">
                        <div class="l">{{item.specsName}}</div>
                        <div class="r">
                            <el-button type="text" @click="removeSpecBase(item,index)">移除规格</el-button>
                        </div>
                    </div>
                    <div class="mm">
                        <div class="li" v-for="(iitem,iindex) in item.specsValueLst">
                            <div class="name">{{iitem.specsValue}}</div>
                            <div class="del" @click="removeSpecSub(item,index,iitem,iindex)"><i
                                    class="el-icon-close"></i>
                            </div>
                        </div>
                    </div>
                    <div class="bb">
                        <el-button type="text" @click="showSpecsSubBox(item)">添加规格值</el-button>
                    </div>
                </div>
                <div class="ff">
                    <el-button @click="showSpecsBaseBox()" plain size="medium">添加规格</el-button>
                </div>
            </div>

            <el-form ref="editForm3" :model="specsTableData" v-if="specsTableData.length>0" style="margin-bottom:10px;">



                <el-table :data="specsTableData" :span-method="objectSpanMethod" border>
                    <el-table-column :prop="item.key" v-for="(item,index) in specsHeadData" :key="item.title"
                        :label="item.title">
                        <template slot-scope="scope">
                            <div v-if="item.type=='text'">{{scope.row[item.key]}}</div>
                            <el-input style="width:100%" v-model="scope.row[item.key]" :placeholder="'请输入'+item.title"
                                v-if="item.type=='string'"></el-input>
                            <el-input-number style="width:100%" v-model="scope.row[item.key]"
                                :placeholder="'请输入'+item.title" controls-position="right" v-if="item.type=='int'">
                            </el-input-number>
                            <el-input-number style="width:100%" v-model="scope.row[item.key]"
                                :placeholder="'请输入'+item.title" controls-position="right" v-if="item.type=='float'"
                                :precision="2"></el-input-number>
                        </template>
                    </el-table-column>

                    <el-table-column prop="productCode" label="商品编码">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.productCode'">
                                <el-input style="width:100%;" v-model="specsTableData[scope.$index].productCode">
                                </el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column prop="albumUrl" label="封面图">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.albumUrl'">
                                <img style="width:30px; height:30px;" :src="specsTableData[scope.$index].albumUrl" @click="SelectResourcesImage(scope.$index)"/>
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column prop="salePrice" label="销售价">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.salePrice'"
                                :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validateMoney}]">
                                <el-input style="width:100%;" v-model="specsTableData[scope.$index].salePrice">
                                </el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="originalPrice" label="成本价">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.originalPrice'"
                                :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validatePrice}]">
                                <el-input style="width:100%;" v-model="specsTableData[scope.$index].originalPrice">
                                </el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column prop="costPrice" label="市场价">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.costPrice'"
                                :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validatePrice}]">
                                <el-input style="width:100%;" v-model="specsTableData[scope.$index].costPrice">
                                </el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column prop="stock" label="当前库存">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.stock'"
                                :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validateStock}]">
                                <el-input style="width:100%;" v-model="specsTableData[scope.$index].stock"
                                    :disabled="editType=='update'"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column prop="changeStockNum" label="增减库存" v-if="editType=='update'">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.changeStockNum'"
                                :rules="[{trigger: ['blur', 'change'] ,validator: $vFN.Tools.validateCountStock}]">
                                <el-input style="width:100%;" v-model="specsTableData[scope.$index].changeStockNum">
                                </el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column prop="costPrice" label="实际库存" v-if="editType=='update'">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input style="width:100%;"
                                    :value="$vFN.Utils.countNumber_add(specsTableData[scope.$index].stock,specsTableData[scope.$index].changeStockNum)"
                                    :disabled="editType=='update'"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>


                    <el-table-column prop="weight" label="重量（Kg）">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.weight'"
                                :rules="[{trigger: ['blur', 'change'] ,validator: weight_validator}]">
                                <el-input style="width:100%;" v-model="specsTableData[scope.$index].weight"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>


                    <el-table-column prop="volume" label="体积（m³）">
                        <template slot-scope="scope">
                            <el-form-item :prop="scope.$index+'.volume'"
                                :rules="[{trigger: ['blur', 'change'] ,validator: volume_validator}]">
                                <el-input style="width:100%;" v-model="specsTableData[scope.$index].volume"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>

                </el-table>


            </el-form>
        </div>



    </div>
    <div v-else style="line-height:60px;  color:#999; text-align: center;">请先选择商品类目</div>
</div>